<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
  <title th:text="${file.title}"></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" th:href="@{/css/image/viewer.css}">
</head>

<body>

<div id="jqhtml">
    <img data-original="${file.url}" th:src="${file.url}" alt="预览图片">
</div>
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/image/viewer.js}"></script>
<script type="text/javascript" th:src="@{/js/image/jviewer.js}"></script>
<script th:inline="javascript">
    let imgUrl = [[${file.url}]]
    $(function() {
        const screenWidth = window.innerWidth;
        const imgWidth = screenWidth / 2;
        const marginLeft = (screenWidth - imgWidth) / 2;

        const img = document.querySelector('img'); // 选择你的图片元素
        img.style.width = `${imgWidth}px`;
        img.style.marginLeft = `${marginLeft}px`;

        $('#jqhtml').viewer({
            url: imgUrl,
        });
    });
</script>
</body>
</html>